﻿<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>商品比较页面</title>
    <th:block th:insert="~{front/include::head}"></th:block>
</head>

<body>
<header th:replace="~{front/include::header}"></header>
    <main class="main">
        <div class="page-header breadcrumb-wrap">
            <div class="container">
                <div class="breadcrumb">
                    <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                    <span></span> 购物
                    <span></span> 同类比较
                </div>
            </div>
        </div>
        <section th:if="${goods.size()>0}" class="mt-50 mb-50">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table text-center">
                                <tbody>
                                    <tr class="pr_image">
                                        <td class="text-muted font-md fw-600">商品图</td>
                                        <td th:each="goodsA:${goods}" class="row_img">
                                        <img th:src="@{/assets/{url}(url=${goodsA.pic})}" alt="compare-img">
                                        </td>
                                    </tr>
                                    <tr class="pr_title">
                                        <td class="text-muted font-md fw-600">名称</td>
                                        <td th:each="goodsA:${goods}" class="product_name" >
                                            <h5>
                                                <a th:href="@{/vm/front/goods/grid(categordId=${goodsA.id})}" th:text="${goodsA.name}"></a>
                                            </h5>
                                        </td>
                                    </tr>
                                    <tr class="pr_price">
                                        <td class="text-muted font-md fw-600">价格</td>
                                        <td th:each="goodsA:${goods}" class="product_price">
                                            <span class="price" th:text="'$'+${goodsA.price}">$45.00</span>
                                        </td>
                                    </tr>
                                    <tr class="pr_rating">
                                        <td class="text-muted font-md fw-600">推荐指数</td>
                                        <td>
                                            <div class="rating_wrap" th:each="goodsA:${goods}">
                                                <div class="product-rate d-inline-block">
                                                    <div class="product-rating" style="width:90%">
                                                    </div>
                                                </div>
                                                <span class="rating_num">(121)</span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="description">
                                        <td class="text-muted font-md fw-600">描述</td>
                                        <td th:each="goodsA:${goods}" class="row_text font-xs">
                                            <p th:text="${goodsA.description}"></p>
                                        </td>
                                    </tr>
                                    <tr class="pr_color">
                                        <td class="text-muted font-md fw-600">颜色</td>
                                        <td th:each="goodsA:${goods}" class="row_color">
                                            <ul class="list-filter color-filter">
                                                <li ><a href="#" data-color="Orange"><span class="product-color-orange"></span></a></li>
                                                <li><a href="#" data-color="Cyan"><span class="product-color-cyan"></span></a></li>
                                                <li><a href="#" data-color="Green"><span class="product-color-green"></span></a></li>
                                                <li><a href="#" data-color="Purple"><span class="product-color-purple"></span></a></li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="pr_size">
                                        <td class="text-muted font-md fw-600">可选规格</td>
                                        <td th:each="goodsA:${goods}" class="row_size">
                                            <ul class="list-filter size-filter mt-15 font-small">
                                                <li><a href="#">S</a></li>
                                                <li><a href="#">M</a></li>
                                                <li><a href="#">L</a></li>
                                                <li><a href="#">XL</a></li>
                                                <li><a href="#">XXL</a></li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <tr class="pr_stock">
                                        <td class="text-muted font-md fw-600">库存状态</td>
                                        <td th:each="goodsA:${goods}" class="row_stock">
                                            <span th:if="${goodsA.qty==0||goodsA.qty==null}" class="text-danger font-weight-bold">缺货</span>
                                            <span th:if="${goodsA.qty>0}" th:text="'库存'+${goodsA.qty}+'件'"></span>
                                        </td>
                                    </tr>
                                    <tr class="pr_dimensions">
                                        <td class="text-muted font-md fw-600">尺寸</td>
                                        <td th:each="goodsA:${goods}" class="row_dimensions">N/A</td>
                                    </tr>
                                    <tr class="pr_add_to_cart">
                                        <td class="text-muted font-md fw-600">购买</td>
                                        <td th:each="goodsA:${goods}" class="row_btn">
                                            <button th:data-goods-id="${goodsA.id}" th:if="${goodsA.qty>0}"
                                                    class="btn  btn-sm add-to-cart" type="button">
                                                <i  class="fi-rs-shopping-bag mr-5"></i>添加到购物车
                                            </button>
                                            <button th:if="${goodsA.qty==0||goodsA.qty==null}" class="btn  btn-sm btn-secondary">
                                                <i class="fi-rs-headset mr-5"></i>缺货中
                                            </button>
                                        </td>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div th:unless="${goods.size()>0}">未找到更多同类项</div>
    </main>
<footer th:replace="~{front/include::footer}"></footer>
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>
</body>

</html>